import React from "react"
import { View, StatusBar, ImageBackground, ImageStyle, ViewStyle } from "react-native"
import { isiPhoneX, isiOS } from "../../utils/device"
import { images } from "../../assets"

const STATUS_BAR_HEIGHT = isiOS() ? (isiPhoneX() ? 34 : 20) : StatusBar.currentHeight

interface LoginHeaderProps {
  fullScreen?: boolean
  component?: any
  height: number
}

const styledHeader: ViewStyle = {
  alignItems: "center",
  flexDirection: "row"
}

export const LoginHeader = ({ fullScreen, height, component }: LoginHeaderProps) => {
  const styledLoginBg: ImageStyle = {
    width: "100%",
    height: height
  }

  const styledContainer = [
    (fullScreen || isiOS()) && {
      paddingTop: STATUS_BAR_HEIGHT
    }
  ]
  return (
    <View style={styledHeader}>
      <ImageBackground style={styledLoginBg} source={images.login.loginBg}>
        <View style={styledContainer}>{component}</View>
      </ImageBackground>
    </View>
  )
}
